<template>
	<view class="comp-smithy-recast">
		<view class="main">
			<view class="section">
				<view :class="['current-recast',equipDataVolume ? 'cursor' : '']">
					<comp-equip-item @click.native="recast_click" v-if="equipDataVolume" :equipDataVolume="equipDataVolume"></comp-equip-item>
				</view>
				<view class="recast-count">
					<block v-if="equipDataVolume">
						<block v-if="equipDataVolume.recast_count > 0">
							<view style="color:var(--color-green)">耐久度：{{equipDataVolume.recast_count}}/{{equipDataVolume.max_recast_count}}</view>
						</block>
						<block v-else>
							<view style="color:var(--color-red2)">不可重铸</view>
						</block>
					</block>
				</view>
				

				
				<view class="recast-attr">
					<view class="recast-attr-hd">属性</view>
					<view :class="['recast-attr-bd',equipDataVolume ? '' : 'welcome-text']">
						<block v-if="equipDataVolume">
							<view class="recast-attr-item" v-if="equipDataVolume.spd != 0" style="color:var(--color-yellow)">
								<view class="label">攻速</view><view class="value">{{equipDataVolume.spd}}</view>
							</view>
							<view class="recast-attr-item" v-if="equipDataVolume.fix_ac != 0" style="color:var(--color-yellow)">
								<view class="label">固伤</view><view class="value">{{equipDataVolume.fix_ac}}</view>
							</view>
							<view class="recast-attr-item" v-if="equipDataVolume.fix_def != 0" style="color:var(--color-yellow)">
								<view class="label">固防</view><view class="value">{{equipDataVolume.fix_def}}</view>
							</view>
							<view class="recast-attr-item" v-if="equipDataVolume.exp_percent != 0" style="color:var(--color-purple)">
								<view class="label">经验加成</view><view class="value">{{equipDataVolume.exp_percent}}%</view>
							</view>
							<view class="recast-attr-item" v-if="equipDataVolume.coin_percent != 0" style="color:var(--color-purple)">
								<view class="label">金币加成</view><view class="value">{{equipDataVolume.coin_percent}}%</view>
							</view>
							<view class="recast-attr-item" v-if="equipDataVolume.suck_blood != 0" style="color:var(--color-purple)">
								<view class="label">吸血</view><view class="value">{{equipDataVolume.suck_blood}}%</view>
							</view>
							<view class="recast-attr-item" v-if="equipDataVolume.crit != 0" style="color:var(--color-purple)">
								<view class="label">暴击</view><view class="value">{{equipDataVolume.crit}}%</view>
							</view>
							<view class="recast-attr-item" v-if="equipDataVolume.crit_percent != 0" style="color:var(--color-purple)">
								<view class="label">暴伤</view><view class="value">{{equipDataVolume.crit_percent}}%</view>
							</view>
						</block>
					</view>
				</view>
				
				<view class="need-resource">
					<view class="need-resource-hd">重铸所需材料</view>
					<view class="need-resource-bd">
						<view class="need-resource-item">
							<view class="label">金币</view><view :class="['value',player.resource.coin < $formula.need_recast_price(equipDataVolume.qlty,equipDataVolume.lv).coin ? 'not-enough' : '']">{{equipDataVolume && equipDataVolume.recast_count > 0  ? $formula.need_recast_price(equipDataVolume.qlty,equipDataVolume.lv).coin : '-'}}</view>
						</view>
						<view class="need-resource-item">
							<view class="label">金刚石</view><view :class="['value',player.resource.diamond_stone < $formula.need_recast_price(equipDataVolume.qlty,equipDataVolume.lv).diamond_stone ? 'not-enough' : '']">{{equipDataVolume && equipDataVolume.recast_count > 0 ? $formula.need_recast_price(equipDataVolume.qlty,equipDataVolume.lv).diamond_stone : '-'}}</view>
						</view>
					</view>
				</view>
				
				<view class="strengthen-btn" @click="recast">重铸</view>
				
			</view>
			
			<view class="right-panel">
				<view class="backpack-items">
					<view class="backpack-items-hd">背包物品</view>
					<view class="backpack-items-bd">
						<view :class="['item',item.uid == equipDataVolume.uid ? 'active' : '']" v-for="(item,index) in player.backpack"  @click.native="equip_click(player.backpack[index])" :key="index">
							<comp-equip-item :equipDataVolume="player.backpack[index]"></comp-equip-item>
						</view>
					</view>
				</view>
				
				<view class="help">
					<rich-text :nodes="$help.wash"></rich-text>
				</view>
			</view>
			
			
		</view>
		
	</view>
</template>

<script>
	import { mapState } from "vuex";
	import compEquipItem from "@/components/comp-equip-item/comp-equip-item"
	export default {
		name:"comp-smithy",
		components:{
			compEquipItem
		},
		computed : {
			...mapState(['mod_player']),
			player(){
				return this.mod_player.player
			}
		},
		data() {
			return {
				equipDataVolume : ''
			};
			
		},
		methods : {
			equip_click(equipDataVolume){
				this.equipDataVolume = equipDataVolume
			},
			recast_click(){
				this.equipDataVolume = '';
				uni.$emit('equip_pop','')
			},
			recast(){

				if(this.equipDataVolume.recast_count <= 0 || !this.equipDataVolume.recast_count){
					uni.$emit('quick_message','不可重铸！');
					return;
				}
				
				let need_coin = this.$formula.need_recast_price(this.equipDataVolume.qlty,this.equipDataVolume.lv).coin;
				let need_diamond_stone = this.$formula.need_recast_price(this.equipDataVolume.qlty,this.equipDataVolume.lv).diamond_stone;
				
				if(this.player.resource.coin < need_coin || this.player.resource.diamond_stone < need_diamond_stone){
					uni.$emit('quick_message','资源不足，请努力攒材料吧！');
					return;
				}
				
				this.$store.commit('mod_player/update_player_resource',{type : 'coin',value : -need_coin})
				this.$store.commit('mod_player/update_player_resource',{type : 'diamond_stone',value : -need_diamond_stone})
				

				let rnd_attrs = ['spd','suck_blood','coin_percent','fix_ac','fix_def','crit','crit_percent','exp_percent'];
				
				for(let i=0;i<rnd_attrs.length;i++){
					this.equipDataVolume[rnd_attrs[i]] = 0;
				}
				
				
				let attr_count = 0;
				
				if(this.equipDataVolume.qlty == 1){
					attr_count = 0;
				}else if(this.equipDataVolume.qlty == 2){
					attr_count = 1;
				}else if(this.equipDataVolume.qlty == 3){
					attr_count = 3;
				}else if(this.equipDataVolume.qlty == 4){
					if(Math.random() <= 0.1){ //重铸 10%几率增加一条词条
						attr_count = 5;
						this.$common.send_message(`<span style="color:var(--color-yellow)">[传闻]</span> <span style="color:var(--color-green)">${this.player.nickname}</span> 将 <span style="color:var(--qlty-${this.equipDataVolume.qlty})">${this.equipDataVolume.name}</span> 重铸出极品属性，神器现世！`)
					}else{
						attr_count = 4;
					}
				}
				
				let rnd_attr = this.$common.getRandomElements(rnd_attrs,attr_count);
				rnd_attr.map(attr => {
					this.equipDataVolume[attr] += this.$common.rnd(1,parseInt(this.equipDataVolume.qlty)+parseInt(this.equipDataVolume.lv))
				})
				
				this.equipDataVolume.recast_count -= 1;
				
				
				this.$common.save_game(false);
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comp-smithy-recast{
		display: flex;
		flex-direction: column;
		height:100%;
		.main{
			flex:1;
			display: flex;
			.section{
				width:395px;
				.current-recast{
					width:80px;
					height:80px;
					border: 1px solid #000;
					border-radius: 4px;
					overflow: hidden;
					background-color: $game-color-2;
					position: relative;
					margin:20px auto 10px;
					&.cursor{
						cursor: pointer;
					}
				}
				.recast-count{
					text-align: center;
					color:var(--color-yellow);
					height:26px;
				}
				.need-resource{
					margin:20px;
				}
				
				.recast-attr{
					border: 1px solid #000;
					margin:20px;
					.recast-attr-hd{
						height:30px;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: $game-color-2;
						border-bottom: 1px solid #000;
					}
					.recast-attr-bd{
						min-height:120px;
						&.welcome-text{
							position: relative;
							&::after{
								content : '祝君洗练出极品！';
								position: absolute;
								left:0;
								right:0;
								text-align: center;
								top:50px;
							}
						}
						
						.recast-attr-item{
							height:30px;
							border-bottom: 1px solid #000;
							display: flex;
							align-items: center;
							&:last-child{
								border-bottom: none;
							}
							&:nth-child(2n){
								background-color: $game-color-2;
							}
							.label{
								width:80px;
								border-right: 1px solid #000;
								height:30px;
								display: flex;
								justify-content: center;
								align-items: center;
							}
							.value{
								padding-left:10px;
								&.not-enough{
									color:var(--color-red2)
								}
							}
						}
					}
				}
				
				.strengthen-btn{
					background-color: #21252b;
					height:40px;
					border: 1px solid #000;
					border-radius: 4px;
					margin:0 20px;
					display: flex;
					justify-content: center;
					align-items: center;
					cursor: pointer;
				}
			}
			
		}
		
		.right-panel{
			display: flex;
			flex-direction: column;
			width:405px;
			border-left: 1px solid #000;
			
			.backpack-items{
				.backpack-items-hd{
					height:30px;
					border-bottom: 1px solid #000;
					display: flex;
					align-items: center;
					padding-left:10px;
				}
				.backpack-items-bd{
					display: flex;
					gap:10px;
					padding:10px 0 10px 10px;
					overflow-y: overlay;
					align-content: flex-start;
					flex-wrap: wrap;
					height:333px;
					border-bottom: 1px solid #000;
					.item{
						width:50px;
						height:50px;
						flex-shrink: 0;
						border: 1px solid #000;
						box-sizing: border-box;
						border-radius: 4px;
						overflow: hidden;
						background-color: $game-color-2;
						position: relative;
						cursor: pointer;
						&.active{
							border: 1px solid var(--color-green);
						}
					}
				}
			}
			.help{
				flex:1;
				padding:10px;
				background-color: $game-color-2;
				line-height: 22px;
			}
		}
		
		

	}
	
</style>